<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 页头 -->
      <PageTools :show-before="true">
        <template slot="before">
          <span>有{{ 0 }}条考勤审批尚未处理</span>
        </template>
        <template slot="after">
          <el-button
            size="small"
            type="primary"
            @click="$router.push('/import?name=考勤')"
          >导入</el-button>
          <el-badge is-dot class="item">
            <el-button
              size="small"
              type="primary"
              @click="RemindDialog = true"
            >提醒</el-button>
          </el-badge>
          <el-button
            size="small"
            type="primary"
            @click="settingDialog = true"
          >设置</el-button>
          <el-button size="small" type="primary" @click="$router.push({path:`/attendances/history`})">历史归档</el-button>
          <el-button
            size="small"
            type="primary"
            @click="$router.push({path:`/attendances/report/${yearMonth.substr(0,6)}`})"
          >{{ monthOfReport }}月份报表</el-button>
        </template>
      </PageTools>

      <!-- 部门 考勤状态筛选 -->
      <el-card>
        <el-form ref="attendancesForm" :model="attendancesForm">
          <!-- 部门 -->
          <el-form-item label="部门:">
            <el-checkbox-group v-model="attendancesForm.department">
              <el-checkbox
                v-for="item in departs"
                :key="item.id"
                :label="item.name"
                name="type"
              />
            </el-checkbox-group>
          </el-form-item>
          <!-- 考勤状态 -->
          <el-form-item label="考勤状态:">
            <el-radio-group v-model="attendancesForm.radio">
              <el-radio
                v-for="item in holidayType"
                :key="item.id"
                :label="item.value"
              >{{ item.value }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 考勤列表 -->
      <el-card class="attendancesCard">
        <!-- 考勤列表 -->
        <div
          style="
            width: 100%;
            position: relative;
            overflow-x: auto;
            overflow-y: hidden;
          "
        >
          <div style="width: 3000px">
            <table
              border="0"
              align="center"
              cellpadding="0"
              cellspacing="0"
              class="tableInfo"
            >
              <tr>
                <th width="50">序号</th>
                <th width="100">姓名</th>
                <th width="100">工号</th>
                <th width="200">部门</th>
                <th width="100">手机</th>
                <th v-for="(day) in daysOfMonth" :key="day" width="110">
                  {{ monthOfReport }}/{{ day }}
                </th>
              </tr>
              <tr v-for="(item, index) in tableData" :key="item.id">
                <td width="50">{{ ((pages.page - 1) * pages.pagesize) + (index + 1) }}</td>
                <td width="100">{{ item.username }}</td>
                <td width="100">{{ item.workNumber }}</td>
                <td width="200">{{ item.departmentName }}</td>
                <td width="100">{{ item.mobile }}</td>
                <td
                  v-for="(it, i) in item.attendanceRecord"
                  :key="i"
                  width="110"
                  @click="showChangeDialog(item, i, it)"
                >
                  <span>{{ getAdtStatu(it.adtStatu) }}</span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <!-- 分页 -->
        <el-pagination
          layout="total,prev, pager, next"
          :total="pages.total"
          :page-size="pages.size"
          @current-change="currentChange"
        />
      </el-card>

      <!-- 提醒弹出框 -->
      <el-dialog title="提醒" :visible.sync="RemindDialog" width="30%">
        <span>系统将通过邮件与短信的形式，对全体员工中存在旷工的考勤进行提醒，该提醒每月仅可发送
          1 次。</span>
        <span slot="footer" class="dialog-footer">
          <el-button
            size="small"
            type="primary"
            @click="RemindDialog = false"
          >我知道了</el-button>
          <el-button size="small" @click="RemindDialog = false">取 消</el-button>
        </span>
      </el-dialog>
      <!-- 设置弹出框 -->
      <SettingDialog :setting-dialog.sync="settingDialog" :departs="departs" />
      <!-- 实际工作日考勤方案 弹出框 -->
      <el-dialog :visible="programDialog" @close="programDialog = false">
        <template #title>
          {{ monthOfReport +'/'+ thisDay }}(实际工作日考勤方案)
        </template>
        <span style="color:red;">注：统计考勤时，异常状态优先正常状态</span>
        <el-radio-group v-model="vacationtypeName">
          <el-radio v-for="item in vacationtype" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
        </el-radio-group>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" type="primary" @click="updateAttendance">确定</el-button>
          <el-button size="small" @click="programDialog = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments'
import attendance from '@/api/constant/attendance'
import { getAttendancesList, updateAttendance } from '@/api/attendances'
import SettingDialog from './components/SettingDialog'
export default {
  components: {
    SettingDialog
  },
  data() {
    return {
      RemindDialog: false, // 提醒弹出框
      settingDialog: false, // 设置弹出框
      departs: [], // 部门列表
      holidayType: [], // 考勤状态
      pages: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      attendancesForm: {
        department: [],
        radio: 3
      },
      // 考勤列表
      tableData: [],
      monthOfReport: '', // 月份报表
      yearMonth: '',
      daysOfMonth: '', // 每月天数
      vacationtype: [], // 假期类型规则,
      programDialog: false, // 实际工作日考勤方案弹出框
      thisDay: 0, // 当天
      vacationtypeName: '1', // 选中的考勤状态
      attendanceCellForm: { // 用户的考勤记录
        adtStatu: '', // 考情状态
        day: '', // 考勤日期
        departmentId: '', // 部门id
        userId: ''// 用户id
      }
    }
  },
  created() {
    this.getDepartments()
    this.showAttendancesList()
    this.holidayType = attendance.holidayType
    this.vacationtype = attendance.vacationtype
  },
  methods: {
    // 获取部门
    async getDepartments() {
      this.departs = (await getDepartments()).depts
    },
    // 获取考勤列表
    async showAttendancesList() {
      const res = await getAttendancesList(this.pages)
      // console.log('考勤列表', res)
      this.tableData = res.data.rows
      this.monthOfReport = res.monthOfReport
      this.pages.total = res.data.total
      this.yearMonth = res.data.rows[0].attendanceRecord[0].day
      // 获取每月天数
      const year = +this.yearMonth.substr(0, 4)
      const month = +this.yearMonth.substr(4, 2)
      this.daysOfMonth = this.getMonthDay(year, month)
      // console.log(this.daysOfMonth)
    },
    // 翻页功能
    currentChange(newPage) {
      // 1. 修改翻页配置
      this.pages.page = newPage
      // 2. 发个请求
      this.showAttendancesList()
    },
    // 获取每月天数
    getMonthDay(year, month) {
      const days = new Date(year, month, 0).getDate()
      return days
    },
    // 判断度假型
    getAdtStatu(adtStatu) {
      const obj = this.vacationtype.find(item => item.id === '' + adtStatu)
      if (obj && obj.name === '正常') obj.name = '√'
      return obj ? obj.name : '未知'
    },
    // 点击工作日 弹出修改弹出框
    showChangeDialog(item, i, it) {
      // console.log(item, i, it)
      this.thisDay = i + 1
      this.vacationtypeName = '' + it.adtStatu
      // 先获取当前点击考勤记录的 用户id  部门id 考勤日期
      this.attendanceCellForm.userId = item.id
      this.attendanceCellForm.departmentId = item.departmentId
      this.attendanceCellForm.day = it.day
      // 打开弹窗
      this.programDialog = true
    },
    // 点击确定 提交 编辑用户的考勤记录
    async updateAttendance() {
      // 发送 编辑用户的考勤记录 请求
      await updateAttendance({ ...this.attendanceCellForm, adtStatu: this.vacationtypeName })
      // 关闭弹窗
      this.programDialog = false
      // 刷新页面(获取新的考勤列表)
      this.showAttendancesList()
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  margin: 0 10px;
}
.attendancesCard {
  margin: 10px 0;
}
.tableInfo {
  line-height: 36px;
  border: solid 1px #ebeef5;
  border-right: 0 none;
  border-bottom: 0 none;
  tr {
    th {
      height: 50px;
      text-align: center;
      border-right: solid 1px #ebeef5;
      border-bottom: solid 1px #ebeef5;
      border-bottom: 2px solid #e8e8e8;
      background: #fafafa;
      min-width: 100px;
    }
    td {
      height: 36px;
      text-align: center;
      border-right: solid 1px #ebeef5;
      border-bottom: solid 1px #ebeef5;
    }
  }
}
.dialog-footer{
  display: flex;
  justify-content: center;
}

</style>
